<!-- 左侧边栏，主页点击显示预测事故概率从高到低排序，可点击跳转详情页 -->
<template>
    <el-button type="warning" plain @click="table = true"
      >事故率</el-button
    >
    <el-drawer
      v-model="table"
      title="事故发生概率榜"
      direction="ltr"
      size="35%"
    >
    <div style="display:flex; margin-bottom: 10px;">
      <el-input
          v-model="searchAddr"
          placeholder="请输入地点查询"
      ></el-input>
      <el-button type="primary" style="margin-left: 10px" @click="searchPredict" circle><el-icon><Search /></el-icon></el-button>
    </div>
      <el-table :data="predictData">
        <el-table-column property="time" label="时间" width="130" />
        <el-table-column property="addr" label="地点" width="130" />
        <el-table-column property="predict" label="事故率" width="130"/>
        <el-table-column label="调度">
          <template v-slot="scope">
            <el-button type="text" @click="details(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="predictData.length === 0" style="text-align: center; margin-top: 100px;">
        无匹配地点
      </div>
    </el-drawer>
      <!-- 详情弹窗 -->  
      <el-dialog  
      title="调度详情"  
      v-model="dialogVisible"  
      width="50%"  
      :before-close="handleClose">  
      <div>  
        <el-table :data="currentDetail">
          <el-table-column property="uid" label="警号" width="120" />
          <el-table-column property="place" label="地点" width="160" />
          <el-table-column property="finished" label="是否完成" width="120" />
          <el-table-column property="starttime" label="开始时间" width="150" />
          <el-table-column property="endtime" label="结束时间"/>
        </el-table>
      </div>  
    </el-dialog>  
  </template>
  
<script>
  import { ElDrawer } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'

  //接口未给出
  export default {
    components: {
      ElDrawer,
      Search,
    },
    data() {
      return {
        table: false, // 控制抽屉的显示隐藏
        searchAddr: '',
        predictData: [], // 确保初始化为数组
        dialogVisible: false, // 控制弹窗的显示与隐藏  
        currentDetail: [], // 当前选中的行的调度详情 
        currentAddr: '',
      };
    },
    mounted() {
      this.fetchPredicts();
    },
    methods: {
      fetchPredicts() {
        // 向服务器请求预测数据
        this.axios.get('https://apifoxmock.com/m1/4767131-4420546-default/api/predict_get')
          .then(response => {
            if (Array.isArray(response.data.predictData)) {
              this.predictData = response.data.predictData; // 确保 predictData 是数组
              console.log(this.predictData);
            } else {
              console.error('Error: Expected an array but got:', response.data.predictData);
            }
          })
          .catch(error => {
            console.error('Error fetching predictData:', error);
          });
      },
    searchPredict() {
    console.log('Searching predict:', this.searchAddr); // 打印当前搜索的地点
      // 根据 searchAddr 搜索概率
    //  this.axios.get(`/api/predict/search?addr=${this.searchAddr}`)

        this.axios.get(`https://apifoxmock.com/m1/4767131-4420546-default/api/get_predicts`,
         { params: { addr:this.searchAddr} })
        .then(response => {
          if (Array.isArray(response.data.predictData)) {
             console.log("Result data is an array:", response.data.predictData);
            this.predictData = response.data.predictData; // 确保 predictData 是数组
          } else {
            this.predictData = []; // 如果没有匹配结果，清空 predictData
            console.error('Error: Expected an array but got:', response.data.predictData);
          }
        })
        .catch(error => {
          this.predictData = []; // 请求出错时也清空 predictData
          console.error('Error searching predictData:', error);
        });
    },
    details(row) {  
      this.currentAddr = row.addr; 
      console.log('detailed place:', this.currentAddr); // 打印当前搜索的地点
        this.axios.get(`https://apifoxmock.com/m1/4767131-4420546-default/task/get_predict_detail/`,
         { params: { place:this.currentAddrr} })
        .then(response => {
          if (Array.isArray(response.data.currentDetail)) {
             console.log("Result data is an array:", response.data.currentDetail);
            this.currentDetail = response.data.currentDetail; // 确保 predictData 是数组
          } else {
            this.currentDetail = []; // 如果没有匹配结果，清空 predictData
            console.error('Error: Expected an array but got:', response.data.currentDetail);
          }
        })
        .catch(error => {
          this.currentDetail = []; // 请求出错时也清空 roles
          console.error('Error searching currentAddr:', error);
        });
      this.dialogVisible = true; // 显示弹窗  
    },  
    handleClose(done) {  
      this.dialogVisible = false; // 关闭弹窗  
      done();  
    }  

  }
}
  
</script>

<style scoped>

</style>